<!DOCTYPE html>
<html lang="cn" itemscope itemtype="http://schema.org/WebPage">
  <head>
    

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <title>Photoswipe Gallery Sample - Beautiful Hugo</title>
  <meta name="description" content="Making a Gallery">
  <meta name="author" content="Some Person"/><script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "name": "Beautiful Hugo",
    
    "url": "https:\/\/leodesksss.gitee.io\/"
}
</script><script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "",
  "url": "https:\/\/leodesksss.gitee.io\/"
  
  
  
  
}
</script>
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "item": {
          "@id": "https:\/\/leodesksss.gitee.io\/",
          "name": "home"
        }
    },{
        "@type": "ListItem",
        "position": 3,
        "item": {
          "@id": "https:\/\/leodesksss.gitee.io\/post\/2017-03-20-photoswipe-gallery-sample\/",
          "name": "Photoswipe gallery sample"
        }
    }]
}
</script><script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Article",
  "author": {
    "name" : "Some Person"
  },
  "headline": "Photoswipe Gallery Sample",
  "description" : "Beautiful Hugo adds a few custom shortcodes created by Li-Wen Yip and Gert-Jan van den Berg for making galleries with PhotoSwipe .\n\r\r\r\r\r\r\rSphere\n\r\r\r\r\r\rTriangle\n\r\r\r",
  "inLanguage" : "cn",
  "wordCount":  215 ,
  "datePublished" : "2017-03-20T00:00:00",
  "dateModified" : "2017-03-20T00:00:00",
  "image" : "https:\/\/leodesksss.gitee.io\/img\/avatar-icon.png",
  "keywords" : [ "example, photoswipe" ],
  "mainEntityOfPage" : "https:\/\/leodesksss.gitee.io\/post\/2017-03-20-photoswipe-gallery-sample\/",
  "publisher" : {
    "@type": "Organization",
    "name" : "https:\/\/leodesksss.gitee.io\/",
    "logo" : {
        "@type" : "ImageObject",
        "url" : "https:\/\/leodesksss.gitee.io\/img\/avatar-icon.png",
        "height" :  60 ,
        "width" :  60
    }
  }
}
</script>

<meta property="og:title" content="Photoswipe Gallery Sample" />
<meta property="og:description" content="Making a Gallery">
<meta property="og:image" content="https://leodesksss.gitee.io/img/avatar-icon.png" />
<meta property="og:url" content="https://leodesksss.gitee.io/post/2017-03-20-photoswipe-gallery-sample/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Beautiful Hugo" />

  <meta name="twitter:title" content="Photoswipe Gallery Sample" />
  <meta name="twitter:description" content="Making a Gallery">
  <meta name="twitter:image" content="https://leodesksss.gitee.io/img/avatar-icon.png" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@username" />
  <meta name="twitter:creator" content="@username" />
  <link href='https://leodesksss.gitee.io/img/favicon.ico' rel='icon' type='image/x-icon'/>
  <meta name="generator" content="Hugo 0.87.0" />
  <link rel="alternate" href="https://leodesksss.gitee.io/index.xml" type="application/rss+xml" title="Beautiful Hugo"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css" integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link rel="stylesheet" href="https://leodesksss.gitee.io/css/main.css" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
  <link rel="stylesheet" href="https://leodesksss.gitee.io/css/highlight.min.css" /><link rel="stylesheet" href="https://leodesksss.gitee.io/css/codeblock.css" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.min.css" integrity="sha384-h/L2W9KefUClHWaty3SLE5F/qvc4djlyR4qY3NUV5HGQBBW7stbcfff1+I/vmsHh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/default-skin/default-skin.min.css" integrity="sha384-iD0dNku6PYSIQLyfTOpB06F2KCZJAKLOThS5HRe8b3ibhdEQ6eKsFf/EeFxdOt5R" crossorigin="anonymous">




  </head>
  <body>
    <nav class="navbar navbar-default navbar-fixed-top navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="https://leodesksss.gitee.io/">Beautiful Hugo</a>
    </div>

    <div class="collapse navbar-collapse" id="main-navbar">
      <ul class="nav navbar-nav navbar-right">
        
          
            <li>
              <a title="Blog" href="/">Blog</a>
            </li>
          
        
          
            <li class="navlinks-container">
              <a class="navlinks-parent">Samples</a>
              <div class="navlinks-children">
                
                  <a href="/post/2017-03-07-bigimg-sample">Big Image Sample</a>
                
                  <a href="/post/2017-03-05-math-sample">Math Sample</a>
                
                  <a href="/post/2016-03-08-code-sample">Code Sample</a>
                
              </div>
            </li>
          
        
          
            <li>
              <a title="About" href="/page/about/">About</a>
            </li>
          
        
          
            <li>
              <a title="Tags" href="/tags">Tags</a>
            </li>
          
        

        

        
      </ul>
    </div>

    
      <div class="avatar-container">
        <div class="avatar-img-border">
          <a title="Beautiful Hugo" href="https://leodesksss.gitee.io/">
            <img class="avatar-img" src="https://leodesksss.gitee.io/img/avatar-icon.png" alt="Beautiful Hugo" />
          </a>
        </div>
      </div>
    

  </div>
</nav>




    


<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

<div class="pswp__bg"></div>

<div class="pswp__scroll-wrap">
    
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    
    <div class="pswp__ui pswp__ui--hidden">
    <div class="pswp__top-bar">
      
      <div class="pswp__counter"></div>
      <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
      <button class="pswp__button pswp__button--share" title="Share"></button>
      <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
      <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
      
      
      <div class="pswp__preloader">
        <div class="pswp__preloader__icn">
          <div class="pswp__preloader__cut">
            <div class="pswp__preloader__donut"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
      <div class="pswp__share-tooltip"></div>
    </div>
    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
    </button>
    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
    </button>
    <div class="pswp__caption">
      <div class="pswp__caption__center"></div>
    </div>
    </div>
    </div>
</div>


  
  
  






  

  <header class="header-section ">
    
    <div class="intro-header no-img">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <div class="post-heading">
              
                <h1>Photoswipe Gallery Sample</h1>
              
              
              
                
                  <h2 class="post-subheading">Making a Gallery</h2>
                
              
              
                <span class="post-meta">
  
  
  <i class="fas fa-calendar"></i>&nbsp;
  
  
    &nbsp;|&nbsp;<i class="fas fa-clock"></i>&nbsp;2&nbsp;
  
  
    &nbsp;|&nbsp;<i class="fas fa-book"></i>&nbsp;215&nbsp;
  
  
    
      &nbsp;|&nbsp;<i class="fas fa-user"></i>&nbsp;Some Person
    
  
  
</span>


              
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>


    
<div class="container" role="main">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <article role="main" class="blog-post">
        <p>Beautiful Hugo adds a few custom shortcodes created by <a href="https://www.liwen.id.au/heg/">Li-Wen Yip</a> and <a href="https://github.com/GjjvdBurg/HugoPhotoSwipe">Gert-Jan van den Berg</a> for making galleries with <a href="http://photoswipe.com">PhotoSwipe</a> .</p>



<div class="gallery caption-position-bottom caption-effect-fade hover-effect-zoom hover-transition" itemscope itemtype="http://schema.org/ImageGallery">
	  
  
<link rel="stylesheet" href="https://leodesksss.gitee.io/css/hugo-easy-gallery.css" />
<div class="box" >
  <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <div class="img" style="background-image: url('https://leodesksss.gitee.io//img/hexagon-thumb.jpg');">
      <img itemprop="thumbnail" src="/img/hexagon-thumb.jpg" alt="/img/hexagon-thumb.jpg"/>
    </div>
    <a href="/img/hexagon.jpg" itemprop="contentUrl"></a>
  </figure>
</div>

  

<div class="box" >
  <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <div class="img" style="background-image: url('https://leodesksss.gitee.io//img/sphere-thumb.jpg');">
      <img itemprop="thumbnail" src="/img/sphere-thumb.jpg" alt="Sphere"/>
    </div>
    <a href="/img/sphere.jpg" itemprop="contentUrl"></a>
      <figcaption>
          <p>Sphere</p>
      </figcaption>
  </figure>
</div>

  

<div class="box" >
  <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <div class="img" style="background-image: url('https://leodesksss.gitee.io//img/triangle-thumb.jpg');">
      <img itemprop="thumbnail" src="/img/triangle-thumb.jpg" alt="This is a long comment about a triangle"/>
    </div>
    <a href="/img/triangle.jpg" itemprop="contentUrl"></a>
      <figcaption>
          <p>Triangle</p>
      </figcaption>
  </figure>
</div>


</div>

<h2 id="example">Example</h2>
<p>The above gallery was created using the following shortcodes:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">{{&lt; gallery caption-effect=&#34;fade&#34; &gt;}}
  {{&lt; figure thumb=&#34;-thumb&#34; link=&#34;/img/hexagon.jpg&#34; &gt;}}
  {{&lt; figure thumb=&#34;-thumb&#34; link=&#34;/img/sphere.jpg&#34; caption=&#34;Sphere&#34; &gt;}}
  {{&lt; figure thumb=&#34;-thumb&#34; link=&#34;/img/triangle.jpg&#34; caption=&#34;Triangle&#34; alt=&#34;This is a long comment about a triangle&#34; &gt;}}
{{&lt; /gallery &gt;}}
</code></pre></div><h2 id="usage">Usage</h2>
<p>For full details please see the <a href="https://github.com/liwenyip/hugo-easy-gallery/">hugo-easy-gallery GitHub</a> page. Basic usages from above are:</p>
<ul>
<li>Create a gallery with open and close tags <code>{{&lt; gallery &gt;}}</code> and <code>{{&lt; /gallery &gt;}}</code></li>
<li><code>{{&lt; figure src=&quot;image.jpg&quot; &gt;}}</code> will use <code>image.jpg</code> for thumbnail and lightbox</li>
<li><code>{{&lt; figure src=&quot;thumb.jpg&quot; link=&quot;image.jpg&quot; &gt;}}</code> will use <code>thumb.jpg</code> for thumbnail and <code>image.jpg</code> for lightbox</li>
<li><code>{{&lt; figure thumb=&quot;-small&quot; link=&quot;image.jpg&quot; &gt;}}</code> will use <code>image-small.jpg</code> for thumbnail and <code>image.jpg</code> for lightbox</li>
<li>All the <a href="https://gohugo.io/extras/shortcodes">features/parameters</a> of Hugo&rsquo;s built-in <code>figure</code> shortcode work as normal, i.e. src, link, title, caption, class, attr (attribution), attrlink, alt</li>
<li><code>{{&lt; gallery caption-effect=&quot;fade&quot; &gt;}}</code> will fade in captions for all figures in this gallery instead of the default slide-up behavior</li>
<li>Many gallery styles for captions and hover effects exist; view the <a href="https://github.com/liwenyip/hugo-easy-gallery/">hugo-easy-gallery GitHub</a> for all options</li>
<li>Note that this theme will load the photoswipe gallery theme and scripts by default, no need to load photoswipe on your individual pages</li>
</ul>

        
          <div class="blog-tags">
            
              <a href="https://leodesksss.gitee.io//tags/example/">example</a>&nbsp;
            
              <a href="https://leodesksss.gitee.io//tags/photoswipe/">photoswipe</a>&nbsp;
            
          </div>
        

        
            <hr/>
            <section id="social-share">
              <div class="list-inline footer-links">
                

<div class="share-box" aria-hidden="true">
    <ul class="share">
      
      <li>
        <a href="//twitter.com/share?url=https%3a%2f%2fleodesksss.gitee.io%2fpost%2f2017-03-20-photoswipe-gallery-sample%2f&amp;text=Photoswipe%20Gallery%20Sample&amp;via=username" target="_blank" title="Share on Twitter">
          <i class="fab fa-twitter"></i>
        </a>
      </li>
  
      
      <li>
        <a href="//www.facebook.com/sharer/sharer.php?u=https%3a%2f%2fleodesksss.gitee.io%2fpost%2f2017-03-20-photoswipe-gallery-sample%2f" target="_blank" title="Share on Facebook">
          <i class="fab fa-facebook"></i>
        </a>
      </li>
  
      
      <li>
        <a href="//reddit.com/submit?url=https%3a%2f%2fleodesksss.gitee.io%2fpost%2f2017-03-20-photoswipe-gallery-sample%2f&amp;title=Photoswipe%20Gallery%20Sample" target="_blank" title="Share on Reddit">
          <i class="fab fa-reddit"></i>
        </a>
      </li>
  
      
      <li>
        <a href="//www.linkedin.com/shareArticle?url=https%3a%2f%2fleodesksss.gitee.io%2fpost%2f2017-03-20-photoswipe-gallery-sample%2f&amp;title=Photoswipe%20Gallery%20Sample" target="_blank" title="Share on LinkedIn">
          <i class="fab fa-linkedin"></i>
        </a>
      </li>
  
      
      <li>
        <a href="//www.stumbleupon.com/submit?url=https%3a%2f%2fleodesksss.gitee.io%2fpost%2f2017-03-20-photoswipe-gallery-sample%2f&amp;title=Photoswipe%20Gallery%20Sample" target="_blank" title="Share on StumbleUpon">
          <i class="fab fa-stumbleupon"></i>
        </a>
      </li>
  
      
      <li>
        <a href="//www.pinterest.com/pin/create/button/?url=https%3a%2f%2fleodesksss.gitee.io%2fpost%2f2017-03-20-photoswipe-gallery-sample%2f&amp;description=Photoswipe%20Gallery%20Sample" target="_blank" title="Share on Pinterest">
          <i class="fab fa-pinterest"></i>
        </a>
      </li>
    </ul>
  </div>
  

              </div>
            </section>
        

        
          
            
          

          
                  <h4 class="see-also"></h4>
                  <ul>
                
                
                    <li><a href="/post/2017-03-07-bigimg-sample/">Big Image Sample</a></li>
                
                    <li><a href="/post/2017-03-05-math-sample/">Math Sample</a></li>
                
                    <li><a href="/post/2016-03-08-code-sample/">Code Sample</a></li>
                
                    <li><a href="/post/2015-02-20-test-markdown/">Test markdown</a></li>
                
              </ul>

          
        
      </article>

      
        <ul class="pager blog-pager">
          
            <li class="previous">
              <a href="https://leodesksss.gitee.io/post/2017-03-07-bigimg-sample/" data-toggle="tooltip" data-placement="top" title="Big Image Sample">&larr; </a>
            </li>
          
          
        </ul>
      


      
        
        
      

    </div>
  </div>
</div>

      
<footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <ul class="list-inline text-center footer-links">
          
              <li>
                <a href="mailto:youremail@domain.com" title="Email me">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://www.facebook.com/username" title="Facebook">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-facebook fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://github.com/username" title="GitHub">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://gitlab.com/username" title="GitLab">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-gitlab fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://bitbucket.org/username" title="Bitbucket">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-bitbucket fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://twitter.com/username" title="Twitter">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://username.slack.com/" title="Slack">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-slack fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://reddit.com/u/username" title="Reddit">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-reddit-alien fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://linkedin.com/in/username" title="LinkedIn">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-linkedin fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://www.xing.com/profile/username" title="Xing">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-xing fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://stackoverflow.com/users/XXXXXXX/username" title="StackOverflow">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-stack-overflow fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://www.snapchat.com/add/username" title="Snapchat">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-snapchat-ghost fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://www.instagram.com/username" title="Instagram">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-instagram fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://www.youtube.com/user/username" title="Youtube">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-youtube fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://soundcloud.com/username" title="SoundCloud">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-soundcloud fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://open.spotify.com/user/username" title="Spotify">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-spotify fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://username.bandcamp.com/" title="Bandcamp">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-bandcamp fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://itch.io/profile/username" title="Itch.io">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fas fa-gamepad fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://vk.com/username" title="VK">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-vk fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://paypal.me/username" title="PayPal">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-paypal fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://telegram.me/username" title="Telegram">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-telegram fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://500px.com/username" title="500px">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-500px fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://codepen.io/username" title="CodePen">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-codepen fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://www.kaggle.com/username" title="kaggle">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-kaggle fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://url" title="Mastodon">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-mastodon fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://weibo.com/username" title="Weibo">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-weibo fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
          
          <li>
            <a href="" title="RSS">
              <span class="fa-stack fa-lg">
                <i class="fas fa-circle fa-stack-2x"></i>
                <i class="fas fa-rss fa-stack-1x fa-inverse"></i>
              </span>
            </a>
          </li>
          
        </ul>
        <p class="credits copyright text-muted">
          
            
              <a href="yourwebsite.com">Some Person</a>
            
          

          &nbsp;&bull;&nbsp;&copy;
          
            2017
          

          
            &nbsp;&bull;&nbsp;
            <a href="https://leodesksss.gitee.io/">Beautiful Hugo</a>
          
        </p>
        
        <p class="credits theme-by text-muted">
          
          
        </p>
      </div>
    </div>
  </div>
</footer><script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.js" integrity="sha384-K3vbOmF2BtaVai+Qk37uypf7VrgBubhQreNQe9aGsz9lB63dIFiQVlJbr92dw2Lx" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/contrib/auto-render.min.js" integrity="sha384-kmZOZB5ObwgQnS/DuDg6TScgOiWWBiVt0plIRkZCmE6rDZGrEOQeHM5PcHi+nyqe" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://leodesksss.gitee.io/js/main.js"></script>
<script src="https://leodesksss.gitee.io/js/highlight.min.js"></script>
<script> hljs.initHighlightingOnLoad(); </script>
<script> $(document).ready(function() {$("pre.chroma").css("padding","0");}); </script><script> renderMathInElement(document.body); </script><script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.min.js" integrity="sha384-QELNnmcmU8IR9ZAykt67vGr9/rZJdHbiWi64V88fCPaOohUlHCqUD/unNN0BXSqy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe-ui-default.min.js" integrity="sha384-m67o7SkQ1ALzKZIFh4CiTA8tmadaujiTa9Vu+nqPSwDOqHrDmxLezTdFln8077+q" crossorigin="anonymous"></script><script src="https://leodesksss.gitee.io/js/load-photoswipe.js"></script>









    
  </body>
</html>

